<template>
  <div class="approval-detail">
    <DetailShow :id="id" :isMainDrawer="mainDrawer" @approvalChange="approvalChange" />
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted} from "vue";
import { useRoute } from "vue-router";
import store from "@/store";
import DetailShow from "./modules/DetailShow.vue";

export default defineComponent({
  name: "ApprovalDetail",
  components: { DetailShow },
  setup() {
    const route = useRoute();
    const state = reactive({
      id: route.query.id,
      mainDrawer:true,
    });
    const approvalChange = () => {
      if (window?.microApp?.getData()?.isMainDrawer) {
        window?.microApp?.getData()?.closeApproval();
      }
    }

    onMounted(()=>{
      // if (window?.microApp?.getData()?.isMainDrawer) {
      //   state.mainDrawer = true
      // }
    })

    return {
      ...toRefs(state),
      approvalChange,
    };
  },
});
</script>
<style lang="less" scoped>
.approval-detail {
  height: 100%;
  .relative {
    height: 100%;
    position: relative;
  }
}
</style>
